<script setup>
import { onBeforeMount, reactive ,toRefs} from 'vue';
import CustomECharts from './components/CustomECharts.vue';
import { getClusterStatisticsHandler } from '../api/cluster';
import { it } from 'element-plus/es/locales.mjs';
const data = reactive({
    // itemList :[
    //     {
    //         id: 'cluster',
    //         header: '集群总数',
    //         total: 25,
    //         seriesName:'集群状态',
    //          data: [
    //             { value: 10, name: 'Active' },
    //             { value: 2, name: 'InActive' },
    //         ]
    //     },
    //     {
    //         id: 'node',
    //         header: '节点总数',
    //         total: 100,
    //         seriesName:'节点分布',
    //          data: [
    //             { value: 10, name: '开发集群' },
    //             { value: 80, name: '生产集群' },
    //             { value: 20, name: 'SIT集群' },
    //             { value: 20, name: 'UAT集群' },
    //         ]
    //     },
    //     {
    //         id: 'pod',
    //         header: 'Pod总数',
    //         total: 1024,
    //         seriesName:'Pod分布',
    //          data: [
    //             { value: 100, name: '开发集群' },
    //             { value: 800, name: '生产集群' },
    //             { value: 202, name: 'SIT集群' },
    //             { value: 202, name: 'UAT集群' },
    //         ]
    //     },
        
    // ]
    itemList:[]
})
onBeforeMount(async() => {
   await getClusterStatisticsHandler().then((res) => {
        data.itemList = res.data.data.items
        console.log("获取集群统计数据:",data.itemList)
    })
})
const {itemList} = toRefs(data)
</script>

<template>
    <div class="auto-echarts-layout">
         <CustomECharts
         v-for="(item, index) in itemList"
         :item="item"
         :key="index"
         >
         </CustomECharts>
    </div>
</template>

<style lang="less" scoped>
.auto-echarts-layout{
  display: flex;
  flex-direction: row;
  /* // 自动换行 */
  flex-wrap: wrap;
  align-items: center;
  div {
    margin: 10px auto;
  }
}
</style>
